<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form id="form">
      用户名: <input type="text" name="user" /> <br />
      文件: <input type="file" name="file" /> <br />
      <button id="btn">提交</button>
    </form>
    <script>
      btn.onclick = function (e) {
        e.preventDefault()
        // 注意: 如果要上传文件,就必须使用formdata和ajax配合
        // 创建formdata
        // const formdata = new FormData() //这样创建formdata,formdata中没有任何数据
        const formdata = new FormData(document.getElementById('form')) //这样创建formdata,formdata中就有了表单中所有表单元素的数据. 注意: form标签中的每一个表单元素,必须写name属性
        console.log(formdata) // 注意: 在控制台直接打印formdata,看起来就是一个空对象
        // console.log(formdata.get('user'))
        // console.log(formdata.get('file'))

        // 如果需要额外的往formdata中添加数据,则使用append
        formdata.append('id', 'asdkfajsfklasjfla')
        formdata.append('xxx', 'abc')
        formdata.append('id', 'yyy')
        console.log(formdata.get('id'))

        const xhr = new XMLHttpRequest()
        // 注意: 如果ajax使用时要配合formdata,则只能使用post请求
        // xhr.open('post', 'http://localhost:5002/test')

        // 注意: 如果ajax请求是,要使用formdata,则无需手动设置请求头中的content-type.因为浏览器会自动帮我们设置 Content-Type: multipart/form-data;
        // 发送请求
        xhr.send(formdata)
      }
    </script>
  </body>
</html>
